<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="msg">
                <h3>豆果美食，会做饭很酷~</h3>
                <p>你关注人的动态都会出现在这</p>
                <p>为你推荐了一些有趣的人，快关注TA吧</p>
            </div>
            <ul>
                <li v-for="(item, index) in FollowList" :key="item.id">
                    <div class="top">
                        <div class="left" @click="touserdetails(item.u.id)">
                            <img :src="item.u.p" alt="">
                            <div>
                                <span>
                                    {{ item.u.n }}
                                    <i>LV.{{ item.u.lvl }}</i>
                                </span>
                                <div >{{ item.u.followers_count_text }} . {{ item.u.recipes_count_text }}</div>
                            </div>
                        </div>
                        <!--                        如果关注了，就显示已关注，否则显示关注-->
                        <div class="right" @click="changeisAttention(item.u.id, index)"
                            :class="{ active: item.isAttention }"> {{
                                item.isAttention ? "已关注" : "关注" }}</div>

                    </div>
                    <div class="showImg" @click="goMenuDeatail(item.item_id)">
                        <img :src="item.img" alt="">
                        <div class="tag" v-if="item.video_url">
                            <van-icon name="play" />
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="collect">
                            <div class="left">
                                <div v-if="store.collect.indexOf(item.item_id) === -1" class="imgs">
                                    <img v-for="i in item.collect_users" :key="i.id" :src="i.p">
                                </div>
                                <div v-else class="imgs">
                                    <img :src="item.u.p">
                                    <img v-for="i in item.collect_users?.slice(0, 3)" :key="i.id" :src="i.p">
                                </div>
                                <span v-if="store.collect.indexOf(item.item_id) === -1">{{ item.fc }}人收藏</span>
                                <span v-else>{{ item.fc + 1 }}人收藏</span>
                            </div>
                            <div class="right">
                                <van-icon v-if="store.collect.indexOf(item.item_id) === -1" name="star-o" size="26px"
                                    color="#000" @click="addCollectList(item.item_id
                                    )" />
                                <van-icon v-else name="star" size="26px" color="#ffd700" @click="store.removeCollectList(item.item_id
                                )" />
                                <van-icon name="chat-o" size="26px" color="#000" />
                                <van-icon name="share-o" size="26px" color="#000" @click="showShare = true" />
                            </div>
                            <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect"
                                :overlay="false" />
                        </div>
                        <p class="title">{{ item.t }}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>

<script lang="ts" setup>
import { useHomeStore } from '@/stores/home'
import { getFollowListAPI } from '@/api/api'
import { reactive, ref, onMounted } from "vue";
import router from '@/router';
import { useRoute } from 'vue-router';
import { useLogining, useLogin } from "../stores/index"
defineOptions({
    name: 'Follow',
})
let route: any = useRoute()
let uselogining: any = useLogining()
let uselogin: any = useLogin()
const store = useHomeStore()
const FollowList: any = reactive([]);
const loading = ref(false);
const finished = ref(false);
let offset = 10;
let limit = 10;
let index = 0;
const isLoading = ref(false);

//分享
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option: any) => {
    showShare.value = false;
};
//下拉刷新
const onRefresh = async () => {
    //将数据清空
    FollowList.splice(0, FollowList.length);
    await onLoad()
    isLoading.value = false;
};
//上拉加载更多
const onLoad = async () => {
    const { data: { result: { rfs } } } = await getFollowListAPI(offset * index, limit)
    rfs.map((item: any) => {
        item.isAttention = false
        FollowList.push(item)
    })
    loading.value = false;
    // 数据全部加载完成
    if (rfs.length === 0) {
        finished.value = true;
    }
    index++
    if (uselogining.isLogining == 1) {
        let arr: any = localStorage.getItem("home");
        if (arr) {
            arr = JSON.parse(arr).followList;
        } else {
            arr = {}
        }
        for (let i: number = 0; i < FollowList.length; i++) {
            if (arr.indexOf(FollowList[i].u.id) != -1) {
                FollowList[i].isAttention = true
            } else {
                FollowList[i].isAttention = false
            }
        }
    }
};

// 跳转用户详情页面
let touserdetails: (id: number) => void = (id: number): void => {
    router.push({ name: 'userdetails', params: { id: id, path: route.fullPath } })
}

// 改变关注状态
let userid: any = ref<string>("");
let changeisAttention = (id: string, index: number) => {
    if (uselogining.isLogining == 1) {
        FollowList[index].isAttention = !FollowList[index].isAttention
        if (FollowList[index].isAttention) {
            // 关注    
            userid.value = id
            store.addFollowList(userid.value);
        } else {
            // 取消关注
            userid.value = id
            store.removeFollowList(userid.value);
        }
    } else {
        // 跳转到登录界面
        uselogin.updateLogin(true);
    }
};
//添加收藏
let addCollectList: (id: number) => void = (id: number): void => {
    if (uselogining.isLogining == 1) {
        store.addCollectList(id)
    } else {
        // 跳转到登录界面
        uselogin.updateLogin(true)
    }
}
//进入菜谱详情
let goMenuDeatail: (id: string) => void = (id: string): void => {
    console.log(id)
    router.push({ name: "MenuDetail", params: { menuId: id,path:route.fullPath } })
}
onMounted((): void => {
    let isLogin = localStorage.getItem("isLogin")
    if (isLogin) {
        uselogining.updateLogining(isLogin)
            ;
    }
})
</script>

<style scoped lang="scss">
.msg {
    padding: 5px 20px;
    background-color: #f8f6f6;

    h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    p {
        font-size: 12px;
        color: #666;
        line-height: 0.5;
    }
}

ul {
    font-size: 16px;
    padding: 0 10px;

    li {
        margin-top: 10px;
        border-radius: 10px;
        background-color: #fff;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;

            .left {
                display: flex;
                align-items: center;

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }

                div {
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    span {
                        font-size: 14px;
                        font-weight: bold;

                        i {
                            color: gold;
                            padding-left: 5px;
                            font-weight: bold;
                        }
                    }

                    div {
                        font-size: 12px;
                        color: #666;
                        margin-left: 0;
                    }
                }
            }

            .right {
                height: 30px;
                line-height: 30px;
                padding: 0 20px;
                border-radius: 15px;
                background-color: #fac448;
                font-weight: bold;

                &.active {
                    background-color: #e8e8e8;
                    color: #999;
                    font-weight: normal;
                }
            }
        }

        .showImg {
            position: relative;

            img {
                width: 100%;
                border-radius: 10px;
            }

            .tag {
                position: absolute;
                bottom: 15px;
                right: 15px;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 16px;
            }
        }

        .bottom {
            padding: 10px;

            .collect {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    display: flex;
                    align-items: center;

                    .imgs {
                        display: flex;
                        align-items: center;

                        img {
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            //margin-right: 5px;
                            border: 2px solid #fff;

                            &:nth-child(n+2) {
                                margin-left: -7px;
                            }
                        }
                    }
                }

                .right {
                    width: 100px;
                    display: flex;
                    justify-content: space-between;
                }
            }

            .title {
                font-size: 14px;
                color: #666;
                margin-top: 10px;
            }
        }
    }
}
</style>